<script setup lang="ts">
import { orderApi } from '@/request/api'
import { useHideLoading, useLoading, useNav } from '@/utils'
import { handleMaiDuan, handleQuZhiFu } from '@/utils/order-operation'
import { useAliPay, useKuaishouPay } from '@/utils/pay'
import { to } from 'await-to-js'
import { defineProps, ref } from 'vue'

const props = defineProps<{
  // 1 生成订单支付 2 支付订单 3 账单支付  4订单详情支付  5 买断支付 6 买断详情
  payStatus: string
  // 订单id
  id?: string | number
  // 账单id
  oid?: string
  // 按钮字
  payTitle?: string
  // 支付方式
  payType: string
}>()
const emit = defineEmits(['payOrder', 'payManner'])

const popup = ref(false)
const payListRef = ref()
function StatusPay() {
  if (!props.payStatus) {
    return
  }
  switch (props.payStatus) {
    case '1':
      generateOrderPay()
      break
    case '2':
      // #ifdef MP-KUAISHOU
      open()
      // #endif
      // #ifndef MP-KUAISHOU
      handleQuZhiFu({ oid: props.id })
      // #endif
      break
    case '3':
      // #ifdef MP-KUAISHOU
      open()
      // #endif
      // #ifndef MP-KUAISHOU
      handlePay()
      // #endif
      break
    case '4':
      // #ifdef MP-KUAISHOU
      useNav('/order/detail', { oid: props.id })
      // #endif
      // #ifndef MP-KUAISHOU
      handleQuZhiFu({ oid: props.id })
      // #endif
      break
    case '5':
      // #ifdef MP-KUAISHOU
      open()
      // #endif
      // #ifndef MP-KUAISHOU
      handleMaiDuan({ oid: props.id })
      // #endif
      break
    case '6':
      // #ifdef MP-KUAISHOU
      useNav('/order/detail', { oid: props.id })
      // #endif
      // #ifndef MP-KUAISHOU
      handleMaiDuan({ oid: props.id })
      // #endif
      break
  }
}
function generateOrderPay() {
  emit('payOrder')
  close()
}
async function onKsPay() {
  const paymentChannel = payListRef.value.getPaymentChannel()
  switch (props.payStatus) {
    case '1':
      // 生成订单支付
      emit('payManner', paymentChannel)
      close()
      break
    case '2':
      handleQuZhiFu({ oid: props.id }, paymentChannel)
      close()
      break
    case '3':
      billKs(paymentChannel)
      break
    case '5':
      handleMaiDuan({ oid: props.id }, paymentChannel)
      close()
      break
  }
}
async function billKs(e: any) {
  // 账单支付
  useLoading(true)
  const [apiErr, apiRes] = await to(
    orderApi.recordPay(
      props.id,
      props.oid,
      0,
      // #ifdef MP-KUAISHOU
      {},
      e.provider,
      // #endif
    ),
  )
  useHideLoading()
  if (apiErr) {
    return
  }
  await to(
    useKuaishouPay(
      {
        order_no: apiRes.order_no,
        order_info_token: apiRes.order_info_token,
      },
      e,
    ),
  )
  close()
  emit('payOrder')
}
async function handlePay() {
  useLoading(true)
  const [apiErr, apiRes] = await to(orderApi.recordPay(props.id, props.oid, 0))
  useHideLoading()
  if (apiErr) {
    return
  }
  // #ifdef MP-ALIPAY
  await to(useAliPay({ tradeNO: apiRes }))
  // #endif
  emit('payOrder')
}

function open() {
  popup.value = true
}

function close() {
  popup.value = false
}
</script>

<template>
  <view class="btn btn-primary-black" @click="StatusPay">
    <slot name="name"> {{ props.payTitle }}</slot>
  </view>
  <!-- #ifdef MP-KUAISHOU -->
  <view
    v-show="popup"
    class="fixed left-0 top-0 z-999 h-100vh h-full w-100vw w-full flex flex-col items-stretch justify-end"
  >
    <view
      class="absolute left-0 top-0 h-full w-full flex-1 bg-black op-46 duration-400"
      @click="close"
    ></view>
    <view
      class="fixed bottom-0 left-0 z-999 min-h-40 w-full translate-y-0 border-rd bg-white op-100 duration-400"
    >
      <view
        class="min-h-60 flex flex-col justify-between bg-white pt-15px safe-pb-15px"
      >
        <view class="px-25px py-20px">
          <cm-pay-list ref="payListRef"></cm-pay-list>
        </view>
      </view>
      <view class="flex items-center justify-evenly px-30px">
        <view class="relative">
          <view
            class="btn-primary-black w-600px text-36px lh-80px"
            @click="onKsPay"
          >立即支付</view>
        </view>
      </view>
    </view>
  </view>
  <!--  #endif  -->
</template>

<style lang="less" scoped>
</style>
